<template>
	<view>
		<view v-if="!isMap" class="bg-white radius-lg-bottom">
			<cu-custom bgColor="bg-gradual-write" :isBack="false">
				<block slot="backText"></block>
				<block slot="content">{{room.roomName}}</block>
			</cu-custom>
			<u-swiper :list="swiperList" keyName="url" height="200" bgColor="#ffffff" :autoplay="false" interval="5000"
				duration="500" circular showTitle radius="5" previousMargin="30" nextMargin="30"
				@click="clickSwiper"></u-swiper>
		</view>
		<!-- 常用功能 -->
		<view v-if="!isMap" class="cu-list grid col-2 no-border text-black radius-lg margin-lr-xs margin-top-sm">
			<view class="cu-item" v-for="(item,index) in upperCommonfunctionsList" :key="index" :bindtap="item.bindtap"
				@tap="goPage(item.url)">
				<uni-icons custom-prefix="cuIcon" :type="'cuIcon-'+item.icon" :color="item.color" size="40"></uni-icons>
				<view class="text-lg margin-top">{{item.name}}</view>
			</view>
		</view>

		<!-- 常用功能 -->
		<view v-if="!isMap" class="cu-list grid col-4 no-border text-black radius-lg margin-lr-xs margin-top-sm">
			<view class="cu-item" v-for="(item,index) in lowerCommonfunctionsList" :key="index" :bindtap="item.bindtap"
				@tap="goPage(item.url)">
				<uni-icons custom-prefix="cuIcon" :type="'cuIcon-'+item.icon" :color="item.color" size="30"></uni-icons>
				<view class="text-lg margin-top">{{item.name}}</view>
			</view>
		</view>

		<view v-if="!isMap" class="cu-bar bg-white margin-lr-xs margin-top-sm radius-lg">
			<view class="action" @tap="selMap">
				<text class="cuIcon-location"></text>
				<view>
					<view class="text-lg">{{room.roomName}}</view>
					<view class="text-sm">{{room.roomAddr}}</view>
				</view>
			</view>
			<view class="action" @tap="goPage('/other_pages/kefu/index')">
				<text class="cuIcon-dianhua"></text>
			</view>
		</view>

		<view v-if="!isMap" class="cu-bar bg-white margin-lr-xs margin-top-sm radius-lg-top">
			<view class="action border-title">
				<text class="text-xl text-bold text-blue">空间介绍</text>
				<text class="bg-gradual-blue" style="width:3rem"></text>
			</view>
		</view>
		<view v-if="!isMap" class="bg-white margin-lr-xs margin-bottom-sm padding-lr-sm radius-lg-bottom">
			<view class="padding-bottom-lg">请让我通过一组图片向你介绍一下门店布局吧！</view>
			<view class="padding-bottom-lg" v-for="(item,index) in roomList" :key="index">
				<u--image :showLoading="true" radius="10" :src="item.url" width="100%"></u--image>
			</view>
		</view>

		<!-- 腾讯地图组件 -->
		<view v-if="isMap" class="map bg-white">
			<cu-custom bgColor="bg-gradual-write" :isBack="true">
				<block slot="backText" @tap="isMap=false">返回</block>
				<block slot="content"></block>
			</cu-custom>
			<iframe id="mapPage" width="100%" height="100%" frameborder="0"
				:src="`https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:${room.longitude},${room.latitude};title:${room.roomName};addr:${room.roomAddr}&key=${key}&referer=myapp`" />
			<!-- end 腾讯地图组件 -->
		</view>
	</view>
</template>

<script>
	import {
		getRoomInfo,
		getRoomBanners,
		getRoomDetail,
		getRoomIdByAppId
	} from '@/api/sr/room'
	export default {
		data() {
			return {
				isMap: false,
				key: 'FMCBZ-T5NLT-42KXB-LTHU4-C75AF-I2B2O',
				swiperList: [],
				room: {
					roomId: undefined,
					roomName: undefined,
					roomAddr: undefined,
					phone: undefined,
					longitude: undefined,
					latitude: undefined,
				},
				upperCommonfunctionsList: [{
					icon: 'lijiyuyue',
					color: '#f37b1d',
					badge: 0,
					url: '/pages/seat/index',
					name: '立刻预约'
				}, {
					icon: 'tuangou',
					color: '#f37b1d',
					badge: 0,
					url: '/other_pages/tuangou/index',
					name: '团购兑换'
				}],
				lowerCommonfunctionsList: [{
					icon: 'moneybagfill',
					color: '#f37b1d',
					badge: 0,
					url: '/other_pages/recharge/recharge',
					name: '充值中心'
				}, {
					icon: 'presentfill',
					color: '#f37b1d',
					badge: 0,
					url: '/other_pages/recharge-card/recharge-card',
					name: '卡券中心'
				}, {
					icon: 'kefu',
					color: 'purple',
					badge: 0,
					url: '/other_pages/kefu/index',
					name: '联系客服'
				}, {
					icon: 'shopfill',
					color: 'green',
					badge: 0,
					url: '/pages/convention',
					name: '门店公约'
				}],
				roomList: [],
			}
		},
		onLoad() {
			console.info('storage_data', uni.getStorageSync('storage_data'))
			console.info('appType', uni.getStorageSync('appType'))
			let appId = uni.getStorageSync('appId');
			this.getRoomIdByAppId(appId);
		},
		methods: {
			async getRoomIdByAppId(appId) {
				getRoomIdByAppId(appId).then(response => {
					let data = response.data;
					console.info('getRoomIdByAppId', data)
					if(data != null){
						let roomId = data[0].roomId;
						uni.setStorageSync('roomId', roomId)
						this.getRoomBanners(roomId, 'index')
						this.getRoomInfo(roomId)
						this.getRoomDetail(roomId)
					}
				});
			},
			async getRoomBanners(roomId, type) {
				getRoomBanners({
					roomId: roomId,
					type: type
				}).then(response => {
					let data = response.data;
					console.info('getRoomBanners', data)
					if (data != null) {
						for (let i = 0; i < data.length; i++) {
							if (data[i] != '') {
								this.swiperList.push({
									url: data[i].ossUrl,
									title: data[i].title,
									type: 'image',
									page: data[i].page,
									param: data[i].param
								})
							}
						}
					}
				});
			},
			async getRoomInfo(roomId) {
				getRoomInfo(roomId).then(response => {
					let data = response.data;
					console.info('getRoomInfo', data)
					this.room = data;
				});
			},
			async getRoomDetail(roomId) {
				getRoomDetail(roomId).then(response => {
					let detail = response.data;
					console.info('getRoomDetail', detail)
					if (detail != null) {
						let galleryArr = detail.gallery.length > 0 ? JSON.parse(detail.gallery) : [];
						for (let i = 0; i < galleryArr.length; i++) {
							if (galleryArr[i] != '') {
								this.roomList.push({
									title: galleryArr[i].ossId,
									url: galleryArr[i].url
								})
							}
						}
					}
					console.info('getRoomDetail-roomList', this.roomList)
				});
			},
			clickSwiper(index) {
				console.info('clickSwiper', this.swiperList[index]);
				this.goPage(this.swiperList[index].page)
			},
			goPage(url) {
				this.$tab.navigateTo(url)
			},
			/**
			 * 腾讯地图以及微信小程序详细地址请求
			 */
			selMap() {
				const that = this
				// #ifdef H5
				this.isMap = true
				window.addEventListener('message', function(event) {
					// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
					var loc = event.data
					if (loc && loc.module ===
						'locationPicker') { // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
						that.isMap = false
						console.info('h5:', loc.poiaddress, loc.latlng.lat, loc.latlng.lng)
					}
				}, false)
				// #endif
				// #ifdef MP-WEIXIN || MP-TOUTIAO
				console.info('MP-WEIXIN----')
				console.info('openLocation', that.room)
				uni.openLocation({
					latitude: parseFloat(that.room.latitude),
					longitude: parseFloat(that.room.longitude),
					name: that.room.roomName,
					address: that.room.roomAddr,
					success: function() {
						console.log('success');
					}
				});
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
	.map {
		height: 100vh;
		padding-bottom: 0;
	}
</style>